import { createBrowserRouter } from "react-router-dom";
import Layouts from "@/pages/Layout";
import Login from "@/pages/Login";
// import Home from "@/pages/Home";
// import Article from "@/pages/Article";
// import Publish from "@/pages/Publish";
import AuthRoute from "@/components/AuthRoute";
import { lazy, Suspense } from "react";

const Publish = lazy(() => import("@/pages/Publish"));
const Article = lazy(() => import("@/pages/Article"));
const Home = lazy(() => import("@/pages/Home"));

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <AuthRoute>
        <Layouts />
      </AuthRoute>
    ),
    children: [
      { index: true, element: (
        <Suspense fallback={'Loading...'}>
          <Home />
        </Suspense>
      ) },
      { path: "/article", element: (
        <Suspense fallback={'Loading...'}>
          <Article />
        </Suspense>
      ) },
      { path: "/publish", element: (
        <Suspense fallback={'Loading...'}>
          <Publish />
        </Suspense>
      ) },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
]);

export default router;
